<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	</head>
	<body>
		<div style="width:200px;height:200px;background:skyblue"></div>
		<script type="text/javascript">
			var div = document.querySelector("div");
			var scaleX=scaleY=1,
				lastDistance=0,
				factor = 0.01;
			
			div.addEventListener("touchstart",function(e){
				var touches = e.targetTouches;
				if(touches&&touches.length==2){
					//计算两点之间距离
					var dx = touches[0].clientX - touches[1].clientX;
					var dy = touches[0].clientY - touches[1].clientY;
					lastDistance = Math.sqrt(dx * dx + dy * dy);
					div.addEventListener("touchmove",touchmoveFun);
				}
			})
			
			function touchmoveFun(e){
				
				var touches = e.targetTouches;
				if (touches && touches.length == 2){
					var distance =0 ;
					//计算两点之间距离
					var dx = touches[0].clientX - touches[1].clientX;
					var dy = touches[0].clientY - touches[1].clientY;
					distance = Math.sqrt(dx * dx + dy * dy);
					//判断当前距离与上次距离变化，确定是放大还是缩小
					scaleX += (distance - lastDistance) * factor;
					scaleY += (distance - lastDistance) * factor;
					
					div.style.transform = "scale("+scaleX+","+scaleY+")";
					div.style.webkitTransform = "scale("+scaleX+","+scaleY+")";
					
					
					lastDistance = distance;
					e.preventDefault();
				}
				

				
		
				
			}
			
			
			//手指离开则取消滑动事件
			div.addEventListener("touchend",function(e){
				div.removeEventListener("touchmove",touchmoveFun)
			})
			
			
			
			
		</script>
	</body>
</html>
